<link rel="stylesheet" href="/assets/user/css/item.css">
<link rel="stylesheet" href="/assets/user/plugins/umeditor/themes/default/css/umeditor.css">
<div class="row-content layer-cf">
    <div class="row">
        <div class="layer-u-sm-12 layer-u-md-12 layer-u-lg-12">
            <div class="widget layer-cf  widget-bff">
                <form id="my-form" class="layer-form tpl-form-line-form" method="post">
                    <div class="widget-body">
                        <fieldset>
						<div class="item-list-add-top">
							<ul class="processBar">
								<li class="item-list-add-top-active " id="line0">基础信息</li>
								<li id="line1">规格/库存</li>
								<li id="line2">商品详情</li>
								<li id="line3">其他</li>
							</ul>
						</div>
						<!-- 基础信息 -->
						<div id="basicInfo">
                            <div class="layer-form-group">
                                <label class="layer-u-sm-3 layer-u-lg-2 layer-form-label form-require">商品名称 </label>
                                <div class="layer-u-sm-9 layer-u-end">
                                    <input type="text" class="tpl-form-input" name="item[name]"
                                           value="{$model['name']}" required>
                                </div>
                            </div>
                            <div class="layer-form-group">
                                <label class="layer-u-sm-3 layer-u-lg-2 layer-form-label form-require">商品分类 </label>
                                <div class="layer-u-sm-9 layer-u-end">
                                    <select name="item[category_id]" required
                                            data-layer-selected="{searchBox: 1, btnSize: 'sm',
                                             placeholder:'请选择商品分类', maxHeight: 400}">
                                        <option value=""></option>
                                        {if isset($catgory)} {foreach $catgory as $first}
                                            <option value="{$first['category_id']}"
                                                {$model['category_id'] === $first['category_id'] ? 'selected' : ''}>
                                               {$first['name']}</option>
											   {if isset($first['child'])}{foreach $first['child'] as $two}
                                          
                                                <option value="{$two['category_id']}"
                                                    {$model['category_id'] === $two['category_id'] ? 'selected' : ''}>
                                                    　　{$two['name']}</option>
													{if isset($two['child'])}{foreach $two['child'] as $three}
                                             
                                                    <option value="{$three['category_id']}"
                                                        {$model['category_id'] === $three['category_id'] ? 'selected' : ''}>
                                                        　　　{$three['name']}</option>
														{/foreach}{/if}
                                              
												{/foreach}{/if}
                                      
											{/foreach}{/if}

                                    </select>
                                    <small class="layer-margin-left-xs layer-btn layer-btn-secondary layer-radius">
                                        <a href="{:url('item.category/add')}" style="color:#fff;">去添加</a>
                                    </small>
                                </div>
                            </div>
                            <div class="layer-form-group">
                                <label class="layer-u-sm-3 layer-u-lg-2 layer-form-label form-require">商品图片 </label>
                                <div class="layer-u-sm-9 layer-u-end">
                                    <div class="layer-form-file">
                                        <button type="button"
                                                class="upload-file layer-btn layer-btn-secondary layer-radius">
                                            <i class="layer-icon-cloud-upload"></i> 选择图片
                                        </button>
                                        <div class="uploader-list layer-cf">
                                            {volist name="model.image" id="item")}
                                                <div class="file-item">
                                                    <a href="{$item['file_path']}" title="点击查看大图" target="_blank">
                                                        <img src="{$item['file_path']}">
                                                    </a>
                                                    <input type="hidden" name="item[images][]"
                                                           value="{$item['image_id']}">
                                                    <i class="iconfont icon-shanchu file-item-delete"></i>
                                                </div>
                                            {/volist}
                                        </div>
                                    </div>
                                    <div class="help-block layer-margin-top-sm">
                                        <small>尺寸750x750像素以上，大小2M以下 (可拖拽图片调整显示顺序 )</small>
                                    </div>
                                </div>
                            </div>
						</div>
						<!-- 规格/库存 -->
						<div id="education">
                            <div class="layer-form-group">
                                <label class="layer-u-sm-3 layer-u-lg-2 layer-form-label form-require">商品规格 </label>
                                <div class="layer-u-sm-9 layer-u-end">
                                    <label class="layer-radio-inline">
                                        <input type="radio" name="item[spec_type]" value="10" data-layer-ucheck
                                            {$model['spec_type'] === 10 ? 'checked' : ''} >
                                        单规格
                                    </label>
                                    <label class="layer-radio-inline">
                                        <input type="radio" name="item[spec_type]" value="20" data-layer-ucheck
                                            {$model['spec_type'] === 20 ? 'checked' : ''} >
                                        <span class="layer-link-muted">多规格</span>
                                    </label>
                                </div>
                            </div>

                            <!-- 商品多规格 -->
                            <div class="item-spec-many layer-form-group"
                                 style="display: {$model['spec_type'] === 20 ? 'block' : 'none'};">
                                <div class="item-spec-box layer-u-sm-12 layer-u-sm-push-0 layer-u-end">
                                    <!-- 规格属性 -->
                                    <div class="spec-attr"></div>

                                    <!-- 添加规格：按钮 -->
                                    <div class="spec-group-button">
                                        <button type="button" class="btn-addSpecGroup layer-btn">添加规格</button>
                                    </div>

                                    <!-- 添加规格：表单 -->
                                    <div class="spec-group-add">
                                        <div class="spec-group-add-item am-form-group">
                                            <label class="am-form-label form-require">规格名 </label>
                                            <input type="text" class="input-specName tpl-form-input"
                                                   placeholder="请输入规格名称">
                                        </div>
                                        <div class="spec-group-add-item am-form-group">
                                            <label class="am-form-label form-require">规格值 </label>
                                            <input type="text" class="input-specValue tpl-form-input"
                                                   placeholder="请输入规格值">
                                        </div>
                                        <div class="spec-group-add-item am-margin-top">
                                            <button type="button" class="btn-addSpecName am-btn am-btn-xs
                                            am-btn-secondary"> 确定
                                            </button>
                                            <button type="button" class="btn-cancleAddSpecName am-btn am-btn-xs
                                              am-btn-default"> 取消
                                            </button>
                                        </div>
                                    </div>
                                    <!-- 商品多规格sku信息 -->
                                    <div class="item-sku layer-scrollable-horizontal">
                                        <!-- 分割线 -->
                                        <div class="item-spec-line layer-margin-top-lg layer-margin-bottom-lg"></div>
                                        <!-- sku 批量设置 -->
                                        <div class=" layer-form-inline">
                                            <div class="layer-form-group">
                                                <label class="layer-form-label">批量设置 <span style="font-size:10px; color:#999;">(批量设置后会覆盖之前的数据)</span></label>
                                            </div>
                                        </div>										
                                        <div class="spec-batch layer-form-inline">
                                            <div class="layer-form-group">
                                                <input type="text" data-type="item_no" placeholder="商家编码">
                                            </div>
                                            <div class="layer-form-group">
                                                <input type="number" data-type="item_price" placeholder="销售价">
                                            </div>
                                            <div class="layer-form-group">
                                                <input type="number" data-type="line_price" placeholder="划线价">
                                            </div>
                                            <div class="layer-form-group">
                                                <input type="number" data-type="stock_num" placeholder="库存数量">
                                            </div>
                                            <div class="layer-form-group">
                                                <input type="number" data-type="weight" placeholder="重量">
                                            </div>
                                            <div class="layer-form-group">
                                                <button type="button" class="btn-specBatchBtn layer-btn layer-btn-sm layer-btn-secondary
                                                 layer-radius">确定
                                                </button>
                                            </div>
										</div>
                                        <!-- sku table -->
                                        <table class="spec-sku-tabel layer-table layer-table-bordered layer-table-centered
                                     layer-margin-bottom-xs layer-text-nowrap"></table>
                                    </div>
                                </div>
                            </div>
                            <!-- 商品单规格 -->
                            <div class="item-spec-single"
                                 style="display: {$model['spec_type'] === 10 ? 'block' : 'none'};">
                                <div class="layer-form-group">
                                    <label class="layer-u-sm-3 layer-u-lg-2 layer-form-label">商品编码 </label>
                                    <div class="layer-u-sm-9 layer-u-end">
                                        <input type="text" class="tpl-form-input" name="item[sku][item_no]"
                                               value="{$model['sku'][0]['item_no']}">
                                    </div>
                                </div>
                                <div class="layer-form-group">
                                    <label class="layer-u-sm-3 layer-u-lg-2 layer-form-label form-require">商品价格 </label>
                                    <div class="layer-u-sm-9 layer-u-end">
                                        <input type="number" class="tpl-form-input" name="item[sku][item_price]"
                                               value="{$model['sku'][0]['item_price']}" required>
                                    </div>
                                </div>
                                <div class="layer-form-group">
                                    <label class="layer-u-sm-3 layer-u-lg-2 layer-form-label">商品划线价 </label>
                                    <div class="layer-u-sm-9 layer-u-end">
                                        <input type="number" class="tpl-form-input" name="item[sku][line_price]"
                                               value="{$model['sku'][0]['line_price']}">
                                    </div>
                                </div>
                                <div class="layer-form-group">
                                    <label class="layer-u-sm-3 layer-u-lg-2 layer-form-label form-require">当前库存数量 </label>
                                    <div class="layer-u-sm-9 layer-u-end">
                                        <input type="number" class="tpl-form-input" name="item[sku][stock_num]"
                                               value="{$model['sku'][0]['stock_num']}" required>
                                    </div>
                                </div>
                                <div class="layer-form-group">
                                    <label class="layer-u-sm-3 layer-u-lg-2 layer-form-label form-require">商品重量(Kg) </label>
                                    <div class="layer-u-sm-9 layer-u-end">
                                        <input type="number" class="tpl-form-input" name="item[sku][weight]"
                                               value="{$model['sku'][0]['weight']}" required>
                                    </div>
                                </div>
                            </div>

                            <div class="layer-form-group">
                                <label class="layer-u-sm-3 layer-u-lg-2 layer-form-label form-require">库存计算方式 </label>
                                <div class="layer-u-sm-9 layer-u-end">
                                    <label class="layer-radio-inline">
                                        <input type="radio" name="item[type]" value="10" data-layer-ucheck
                                            {$model['type'] === 10 ? 'checked' : ''} >
                                        下单减库存
                                    </label>
                                    <label class="layer-radio-inline">
                                        <input type="radio" name="item[type]" value="20" data-layer-ucheck
                                           {$model['type'] === 20 ? 'checked' : ''} >
                                        付款减库存
                                    </label>
                                </div>
                            </div>
						</div>
						<!-- 商品详情 -->
						<div id="work">
                            <div class="layer-form-group">
                                <label class="layer-u-sm-3 layer-u-lg-2 layer-form-label">商品详情 </label>
                                <div class="layer-u-sm-9 layer-u-end">
                                    <!-- 加载编辑器的容器 -->
                                    <textarea id="container" name="item[content]">{$model['content']}</textarea>
                                </div>
                            </div>
						</div>
						<!-- 其他 -->
						<div id="social">
                            <div class="layer-form-group">
                                <label class="layer-u-sm-3 layer-u-lg-2 layer-form-label form-require">运费模板 </label>
                                <div class="layer-u-sm-9 layer-u-end">
                                    <select name="item[delivery_id]" required
                                            data-layer-selected="{searchBox: 1, btnSize: 'sm',  placeholder:'请选择运费模板'}">
                                        <option value="">请选择运费模板</option>
                                        {foreach $delivery as $item}
                                            <option value="{$item['delivery_id']}"
                                                {$model['delivery_id'] === $item['delivery_id'] ? 'selected' : ''}>
                                                {$item['name']} ({$item['method']['text']})
                                            </option>
                                        {/foreach}
                                    </select>
                                    <small class="layer-margin-left-xs">
                                        <a href="{:url('setting.delivery/add')}">去添加</a>
                                    </small>
                                </div>
                            </div>
                            <div class="layer-form-group">
                                <label class="layer-u-sm-3 layer-u-lg-2 layer-form-label form-require">商品状态 </label>
                                <div class="layer-u-sm-9 layer-u-end">
                                    <label class="layer-radio-inline">
                                        <input type="radio" name="item[status]" value="10" data-layer-ucheck
											{if $model['status'] eq 10}
											checked="checked"
											{/if}>
                                          
                                        上架
                                    </label>
                                    <label class="layer-radio-inline">
                                        <input type="radio" name="item[status]" value="20" data-layer-ucheck
										{if $model['status'] eq 20}
											checked="checked"
											{/if}
                                           >
                                        下架
                                    </label>
                                </div>
                            </div>
                            <div class="layer-form-group">
                                <label class="layer-u-sm-3 layer-u-lg-2 layer-form-label">初始销量</label>
                                <div class="layer-u-sm-9 layer-u-end">
                                    <input type="number" class="tpl-form-input" name="item[sales_initial]"
                                           value="{$model['sales_initial']}">
                                </div>
                            </div>
                            <div class="layer-form-group">
                                <label class="layer-u-sm-3 layer-u-lg-2 layer-form-label form-require">商品排序 </label>
                                <div class="layer-u-sm-9 layer-u-end">
                                    <input type="number" class="tpl-form-input" name="item[sort]"
                                           value="{$model['sort']}" required>
                                    <small>数字越小越靠前</small>
                                </div>
                            </div>
						</div>
						
							<div class="item-list-add-content-foot ">
								<a class="layer-btn layer-btn-default "  id="previous_step">上一步</a>
								<a  class="j-submit layer-btn layer-btn-secondary " id="next_step">下一步 </a>
								
								<button type="submit" class="j-submit layer-btn layer-btn-secondary " id="tijiao">提交 </button>
								 
							</div>
                        </fieldset>
                    </div>
					
					
                </form>
            </div>
        </div>
    </div>
</div>
<script src="/assets/user/js/ddsort.js"></script>
<script src="/assets/user/plugins/umeditor/umeditor.config.js"></script>
<script src="/assets/user/plugins/umeditor/umeditor.js"></script>
<script src="/assets/user/js/item.spec.js"></script>
<!-- 图片文件列表模板 -->
{include file="layouts/_template/tpl_file_item" /}

<!-- 文件库弹窗 -->
{include file="layouts/_template/file_library" /}

<!-- 商品多规格模板 -->
{include file="item/_template/spec_many" /}


<script>
    $(function () {
		
        // 富文本编辑器
        UM.getEditor('container', {
            initialFrameWidth: 600 ,
            initialFrameHeight: 600
        });

        // 选择图片
        $('.upload-file').selectImages({
            name: 'item[images][]'
            , multiple: true
        });

        // 图片列表拖动
        $('.uploader-list').DDSort({
            target: '.file-item',
            delay: 100, // 延时处理，默认为 50 ms，防止手抖点击 A 链接无效
            floatStyle: {
                'border': '1px solid #ccc',
                'background-color': '#fff'
            }
        });
		
        // 注册商品多规格组件
        var specMany = new itemSpec({
            container: '.item-spec-many'
        }, <?= $specData ?>);

        // 切换单/多规格
        $('input:radio[name="item[spec_type]"]').change(function (e) {
            var $itemSpecMany = $('.item-spec-many')
                , $itemSpecSingle = $('.item-spec-single');
            if (e.currentTarget.value === '10') {
                $itemSpecMany.hide() && $itemSpecSingle.show();
            } else {
                $itemSpecMany.show() && $itemSpecSingle.hide();
            }
        });

        /**
         * 表单验证提交
         * @type {*}
         */
        $('#my-form').superForm({
            // form data
            buildData: function () {
                return {
                    item: {
                        spec_many: specMany.getData()
                    }
                };
            },
            // 自定义验证
            validation: function () {
                var specType = $('input:radio[name="item[spec_type]"]:checked').val();
                if (specType === '20') {
                    var isEmpty = specMany.isEmptySkuList();
                    isEmpty === true && layer.msg('商品规格不能为空');
                    return !isEmpty;
                }
                return true;
            }
        });

    });
	
	
</script>
<script>

	$(document).ready(function(){
		$("#education").addClass('main-hide');
		$("#work").addClass('main-hide');
		$("#social").addClass('main-hide');
		$('#previous_step').hide();
		$('#tijiao').hide();
		/*上一步*/
		$('#previous_step').bind('click', function () {
			index--;
			ControlContent(index);
		});
		/*下一步*/
		$('#next_step').bind('click', function () {
			index++;
			ControlContent(index);
		});
	});
	var index=0;
	function ControlContent(index) {
		var stepContents = ["basicInfo","education","work","social"];
		var key;//数组中元素的索引值
		for (key in stepContents) {
			var stepContent = stepContents[key];//获得元素的值
			if (key == index) {
				if(stepContent=='basicInfo'){
					$('#previous_step').hide();
					$('#tijiao').hide();
				}else{
					$('#previous_step').show();
				}
				if(stepContent=='education'){
					$('#tijiao').hide();
				}
				if(stepContent=='work'){
					$('#tijiao').hide();
				}			
				if(stepContent=='social'){
					$('#next_step').hide();
					$('#tijiao').show();
				}else{
					$('#next_step').show();
				}
				$('#'+stepContent).removeClass('main-hide');
				$('#line'+key).addClass('item-list-add-top-active');
				$('#line'+key).removeClass('item-list-add-col');
			}else {
				$('#'+stepContent).addClass('main-hide');
				if(key>index){
					$('#line'+key).removeClass('item-list-add-top-active');
				}else if(key<index){
					$('#line'+key).addClass('item-list-add-col');
				}
			}
		}

	}
</script>